import * as React from "react";
import moment from "moment";
import {Button, Modal, Spin, Table, Row, Form, Col, Input, message} from "antd";
import {getNetWorkData} from "../../../../../../utils/common";
import {getFireFaultUrl, handleFaultUrl} from "../serverApi";
import IconFont from "../../../../../../assets/ICON";

export interface FaultManageTableProps {
    paramJson: FaultManageTableParam;
}

export interface FaultManageTableState {}

export interface FaultManageTableParam {
    isHandle: string;
    faultType: number;
    start: number;
    end: number;
}

interface columnsDataCLass {
    title: string;
    dataIndex: string;
    key: string;
    render?: any;
}

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
        md: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
        md: { span: 16 },
    },
};

class FaultManageTable extends React.Component<FaultManageTableProps, FaultManageTableState> {
    private notColumns: columnsDataCLass[] = [
        {
            title: "设备编号",
            dataIndex: "deviceNo",
            key: "deviceNo",
        },
        {
            title: "设备名称",
            dataIndex: "deviceName",
            key: "deviceName",
        },
        {
            title: "设备地址",
            dataIndex: "devAdd",
            key: "devAdd",
        },
        {
            title: "故障时间",
            dataIndex: "dataTime",
            key: "dataTime",
            render: (value) =>
                value ? moment(value).format("yyyy-MM-DD HH:mm:ss") : "",
        },
        {
            title: "故障类型",
            dataIndex: "faultTypeName",
            key: "faultTypeName",
        },
        {
            title: "故障描述",
            dataIndex: "faultDesc",
            key: "faultDesc",
        },
        {
            title: "操作",
            dataIndex: "",
            key: "x",
            render: (value, record) =>
                <Button type="primary" onClick={() => {
                    this.rowData = record;
                    this.faultList.push(record);
                    this.setState({oneVisible: true});
                    this.forceUpdate();
                }}>处理</Button>
        },
    ];

    private yesColumns: columnsDataCLass[] = [
        {
            title: "设备编号",
            dataIndex: "deviceNo",
            key: "deviceNo",
        },
        {
            title: "设备名称",
            dataIndex: "deviceName",
            key: "deviceName",
        },
        {
            title: "设备地址",
            dataIndex: "devAdd",
            key: "devAdd",
        },
        {
            title: "故障时间",
            dataIndex: "dataTime",
            key: "dataTime",
            render: (value) =>
                value ? moment(value).format("yyyy-MM-DD HH:mm:ss") : "",
        },
        {
            title: "故障类型",
            dataIndex: "faultTypeName",
            key: "faultTypeName",
        },
        {
            title: "故障描述",
            dataIndex: "faultDesc",
            key: "faultDesc",
        },
        {
            title: "处理人",
            dataIndex: "handler",
            key: "handler",
        },
        {
            title: "处理时间",
            dataIndex: "handleTime",
            key: "handleTime",
            render: (value) =>
                value ? moment(value).format("yyyy-MM-DD HH:mm:ss") : "",
        },
        {
            title: "处理结论",
            dataIndex: "handleDesc",
            key: "handleDesc",
        },
    ];

    private rowKeys: [] = [];
    private faultList: any[] = [];
    private columns = this.props.paramJson.isHandle === "1" ? this.yesColumns : this.notColumns;
    private rowSelection: any = this.props.paramJson.isHandle === "1" ? undefined :
        {
            type: 'checkbox',
            onChange:(rowKeys, selectedRows) => {
                this.rowKeys = rowKeys;
                this.faultList = selectedRows;
            }
        }

    state = {
        loading: false,
        oneVisible: false,
        manyVisible: false,
    };
    private dataSource: any[] = [];
    private pageIndex: number = 1;
    private pageSize: number = 20;
    private total: number = 0;

    private rowData: any = {
        deviceNo: "",
        deviceName: "",
        devAdd: "",
        faultDesc: "",
    };

    private fromEdit: any = null;
    private anyFromEdit: any = null;

    render() {
        return (
            <Spin spinning={this.state.loading}>
                {
                    this.props.paramJson.isHandle === "1" ? "" :
                        <Button
                            type="primary" size="middle" style={{marginBottom: 16}}
                            icon={<IconFont type="icon_bangding" style={{fontSize: 12}}/>}
                            onClick={() => {this.startManyHandle();}}
                        >
                        处理
                        </Button>
                }
                <Table
                    columns={this.columns}
                    dataSource={this.dataSource}
                    rowKey={"id"}
                    rowSelection={this.rowSelection}
                    pagination={{
                        pageSize: this.pageSize,
                        total: this.total,
                        current: this.pageIndex,
                        onChange: (page: number) => {
                            this.pageIndex = page;
                            this.getPageData(page, this.props.paramJson);
                        },
                    }}>
                </Table>
                <Modal
                    title="故障处理"
                    visible={this.state.oneVisible}
                    maskClosable={false}
                    onOk={() => {
                        this.handleOne();
                    }}
                    onCancel={() => {
                        this.setState({oneVisible: false});
                    }}
                >
                    <Form {...formItemLayout} ref={(el) => (this.fromEdit = el)}>
                        <Row>
                            <Col span={18} offset={3}>
                                <Form.Item label="设备编号">{this.rowData.deviceNo}</Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={18} offset={3}>
                                <Form.Item label="设备名称">{this.rowData.deviceName}</Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={18} offset={3}>
                                <Form.Item label="设备地址">{this.rowData.devAdd}</Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={18} offset={3}>
                                <Form.Item label="故障描述">{this.rowData.faultDesc}</Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={18} offset={3}>
                                <Form.Item label="处理人" name="handler" rules={[{required: true, message: "请填写处理人"}]}>
                                    <Input placeholder="请填写处理人" />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={18} offset={3}>
                                <Form.Item label="处理结论" name="handleDesc" rules={[{required: true, message: "请填写处理结论"}]}>
                                    <Input placeholder="请填写处理结论" />
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
                <Modal
                    title="故障批处理"
                    visible={this.state.manyVisible}
                    maskClosable={false}
                    onOk={() => {
                        this.handleMany();
                    }}
                    onCancel={() => {
                        this.setState({manyVisible: false});
                    }}
                >
                    <Form {...formItemLayout} ref={(el) => (this.anyFromEdit = el)}>
                        <Row>
                            <Col span={12} offset={8}>
                                <Form.Item label="">
                                    已选择{this.rowKeys.length}条设备故障信息
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={18} offset={3}>
                                <Form.Item label="处理人" name="handler" rules={[{required: true, message: "请填写处理人"}]}>
                                    <Input placeholder="请填写处理人" />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={18} offset={3}>
                                <Form.Item label="处理结论" name="handleDesc" rules={[{required: true, message: "请填写处理结论"}]}>
                                    <Input placeholder="请填写处理结论" />
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            </Spin>
        );
    }
    //钩子函数，props被改变时被触发
    componentWillReceiveProps(nextProps) {
        this.pageIndex = 1;
        this.getPageData(this.pageIndex, nextProps.paramJson);
        return true;
    }
    //分页查询
    getPageData(page: number, paramJson: FaultManageTableParam) {
        if (paramJson.start === 0 || paramJson.end === 0) {
            return;
        }
        this.rowKeys = [];
        this.faultList = [];
        this.dataSource = [];
        this.forceUpdate();
        let param = {
            pageIndex: page,
            pageSize: this.pageSize,
            isHandle: paramJson.isHandle,
            faultType: paramJson.faultType,
            start: paramJson.start,
            end: paramJson.end,
        };
        this.setState({loading: true});
        getNetWorkData(getFireFaultUrl, param, this, (result) => {
            this.setState({loading: false});
            if (result.success) {
                this.dataSource = result.data.records;
                this.total = result.data.total;
                this.forceUpdate();
            }
        },
        (err) => {
            this.setState({loading: false});
        });
    }
    //处理一个
    handleOne() {
        let _this = this;
        const form: any = (this.fromEdit as any) as HTMLDivElement;
        form.validateFields().then((param) => {
            param.faultList = _this.faultList;
            _this.handleFault(param, form);
        });
    }

    startManyHandle() {
        if(this.rowKeys.length > 0){
            this.setState({manyVisible: true});
        }else {
            message.info("请选择数据！");
        }
    }
    //批处理
    handleMany() {
        let _this = this;
        const form: any = (this.anyFromEdit as any) as HTMLDivElement;
        form.validateFields().then((param) => {
            param.faultList = _this.faultList;
            _this.handleFault(param, form);
        });
    }
    //故障处理
    handleFault(param, form) {
        getNetWorkData(handleFaultUrl, param, this, (result) => {
            if (result.success) {
                //清空表单
                form.resetFields();
                //隐藏弹出框
                this.setState({oneVisible: false, manyVisible: false});
                this.pageIndex = 1;
                this.getPageData(this.pageIndex, this.props.paramJson);
            }
        });
    }
}
export default FaultManageTable;